<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  .aside {
    background-color: aliceblue;
    padding: 20px;
    position: fixed;
    top: 60px;
    /* 如果 header 高度不同，需要相应调整 top 值 */
    left: 0;
    height: calc(100vh - 10px);
    /* 计算 aside 的高度 */
    width: 160px;
  }

  .aside .menu {
    background-color: rgb(188, 227, 227);
    border-radius: 5px;
    height: calc(100vh - 100px);
  }

  .menu .cover {
    margin: 10px;
    width: calc(100% - 20px);
    height: 80px;
    border-radius: 5px;
  }

  .tab {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  .menu a {
    display: flex;
    padding: 15px;
    text-decoration: none;
    color: #000;
    background-color: rgb(188, 227, 227);
    align-items: center;
    justify-content: space-between;
  }

  .arrow {
    width: 20px; /* 设置箭头图片的宽度 */
    height: auto; /* 自适应高度 */
  }

  .menu a:hover {
    cursor: pointer;
    background-color: rgb(5, 163, 166);
  }

  .menu a:active {
    background-color: rgb(5, 163, 166);
  }

  /* 高亮显示 */
  .current a {
    background-color: rgb(100, 179, 181);
    /*background-color: rgb(5, 163, 166);*/
  }

  .arrow {
    display: none;
  }

  .current .arrow {
    display: block;
  }

  .main {
    display: none;
  }

  .main {
    position: fixed;
    top: 60px;
    left: 200px;
    right: 0;
    bottom: 0;
    padding: 20px;
    overflow-y: auto;
    background-color: aliceblue;
    /* 只有内容溢出时才会显示垂直滚动条 */
  }
</style>

<div class="aside">
  <div class="menu">
    <img class="cover" src="${course_key.cover}">
    <ul class="tab">
      <li>
        <a href="javascript:void(0)" id="material">
          <span>资料</span>
          <img src="../assets/images/箭头.png" alt="arrow" class="arrow">
        </a>
      </li>
      <li>
        <a href="javascript:void(0)" id="exam">
          <span>考试</span>
          <img src="../assets/images/箭头.png" alt="arrow" class="arrow">
        </a>
      </li>
      <li>
        <a href="javascript:void(0)" id="charts">
          <span>学习记录</span>
          <img src="../assets/images/箭头.png" alt="arrow" class="arrow">
        </a>
      </li>
    </ul>
  </div>
</div>
<div class="main">
  <%@ include file="material.jsp" %>
</div>
<div class="main">
  <%@ include file="exam.jsp" %>
</div>
<div class="main">
  <%@ include file="record.jsp" %>
</div>

<script>
  function setIndex() {
    var list = document.querySelectorAll('li')
    for (let i = 0; i < list.length; i++) {
      list[i].setAttribute('index', i)
    }
    var mainList = document.getElementsByClassName('main')
    for (let i = 0; i < mainList.length; i++) {
      mainList[i].setAttribute('index', i)
    }
    list[0].className = 'current'
    mainList[0].style.display = 'block'
  }

  var list = document.querySelectorAll('li')
  var mainList = document.getElementsByClassName('main')
  for (let i = 0; i < list.length; i++) {
    list[i].onclick = function () {
      for (let i = 0; i < list.length; i++) {
        list[i].className = ''
      }
      this.className = 'current'
      var index = this.getAttribute('index')
      for (let i = 0; i < mainList.length; i++) {
        mainList[i].style.display = 'none'
      }
      mainList[index].style.display = 'block'
    }
  }
</script>

